<!DOCTYPE html>
<html lang="en">
<head>
<title>huangliusong</title>
<script src="./vue.js"></script>

</head>
 
<body>
	<div id="root">
		<transition name="fade" 
		 @before-enter="handleBeforeEnter"
		 @enter="handleEnter"
		 @after-enter="handleAfterEnter">
			<div v-if="show">黄柳淞</div>
		</transition>
		<button @click="handeClick">切换</button>
	</div>

	<script type="text/javascript">
	var vm=new Vue({
		el:"#root",
		data:{
			show:true
		},
		methods:{
			handeClick:function(){
				this.show=!this.show
			},
			handleBeforeEnter:function(el){
				el.style.color="red"
			},
			handleEnter:function(el,done){
				setTimeout(()=>{
					el.style.color="green"
				},2000)
				setTimeout(()=>{
					done()
				},4000)
			},
			handleAfterEnter:function(el){
				el.style.color="#ccc"
			}
		}
	})
	</script>
</body>

</html>